<template>
  <transition
  appear
  enter-active-class="animated zoomIn"
  leave-active-class="animated zoomOut absolute-top"
>
  <div v-show="todos子项.length">

    <q-banner :class="['text-white text-center 上圆角', 标题 == '已完成' ? 'bg-green-4' : 'bg-orange-4']"
    v-if="!settings.data.todo.隐藏头部"
    >
      <span class="text-bold text-subtitle1">{{ 标题 }}</span>
    </q-banner>

    <q-list bordered separator>
      <q-item v-ripple v-for="i in todos子项" :class="i.完成 ? 'bg-green-1' : 'bg-orange-1'"
        v-touch-hold:1000.mouse="handleHold" :key="i.id"
        clickable tag="label">
        <q-item-section v-show="false">
          <q-item-label>{{ i.id }}</q-item-label>
        </q-item-section>
        <q-item-section side top>
          <q-checkbox v-model="i.完成" />
        </q-item-section>

        <q-item-section>
          <q-item-label v-html="高亮搜索(i.名称,store.关键词)"></q-item-label>
        </q-item-section>

        <q-item-section side>
          <div class="row">
            <div class="column justify-center">
              <q-icon name="event" size="18px" class="q-mr-xs">
              </q-icon>
            </div>
            <div class="column">
              <q-item-label class="row justify-end">{{ niceday(i.到期日期) }}</q-item-label>
              <q-item-label class="row justify-end">{{ nicetime(i.到期时间) }}</q-item-label>
            </div>
          </div>
        </q-item-section>

        <q-item-section side>
          <div class="row">

            <q-btn @click="edit1(i.id)" flat round dense color="primary" icon="edit"></q-btn>
            <q-btn @click="delete1(i.id)" flat round dense color="red" icon="delete"></q-btn>
          </div>
        </q-item-section>

      </q-item>
    </q-list>

  </div>
  </transition>
</template>

<script setup>
import { date } from 'quasar'
import { storeToRefs } from 'pinia'

import { useTodo } from './todo-store'
import { ref } from 'vue';
import { computed } from 'vue';
const store = useTodo()
const { delete1, edit1 ,niceday,高亮搜索,nicetime} = store

import { useSettings } from '../settings/settings-store'
const settings = useSettings()

defineProps(['todos子项', "标题"])

function handleHold(e) {
  // console.log(`e.evt`,e.evt)
  // console.log(`e.evt.target`,e.evt.target)
  let kk=e.evt.target.__vueParentComponent.parent.parent.vnode.key
  // console.log(`……parent.vnode.key`,kk)
  if (kk) {
    edit1(kk)
  }

}

</script>
